<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post和get请求试练</title>
</head>

<body>
    <button id="btn1">发送get请求</button>
    <button id="btn2">发送post请求</button>


    <div id="box1"></div>
    <div id="box2">
        <ul id="fruit"></ul>
    </div>

    <script src="./js/axios.js"></script>
    <script>
        let btn1Ele = document.getElementById('btn1');
        let btn2Ele = document.getElementById('btn2');
        let box1ELe = document.getElementById('box1');
        let fruitEle = document.getElementById('fruit');

        btn1Ele.addEventListener('click', async () => {
            // 发送get请求
            // axios请求结果返回的是promise(承诺)，承诺成功或者失败
            // 获取其成功结果在前面加个await等待其成功的结果，
            // await不能单独使用，要在其所属的函数前面加个async
            let { data } = await axios({
                method: 'get',
                url: 'http://192.168.218.1:5522/user',
            });
            console.log(data);
            let { name, age } = data;
            box1ELe.innerText = `姓名:${name},年龄:${age}`
        });

        btn2Ele.addEventListener('click', async () => {
            // 发送post请求
            let { data } = await axios({
                method: 'post',
                url: 'http://192.168.218.1:5522/fruit',
            });
            console.log(data);
            let lis = '';
            data.forEach((item) => {
                lis += `<li>${item}</li>`
            });
            fruitEle.innerHTML = lis;
        });
    </script>

</body>

</html>